<template>
    <a-card :bordered='false' :active-tab-key='tabKey' :tab-list='tabList' @tabChange='key => setTabKey(key)'>
        <div v-show='tabKey == 1'>
            <StrategyList></StrategyList>
        </div>
        <div v-show='tabKey == 2'>
            <template v-if='tabKey2Init'>
                <MyStrategyList></MyStrategyList>
            </template>
        </div>
    </a-card>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import StrategyList from './StrategyList.vue'
    import MyStrategyList from './MyStrategyList.vue'
import { useRoute } from 'vue-router'

    const route = useRoute()

    const tabKey = ref(1)
    const tabKey2Init = ref(false)
    const tabList = reactive([
      {
        key: 1,
        tab: '策略列表',
      },
      {
        key: 2,
        tab: '我的策略',
      },
    ]);

    function setTabKey(key) {
        tabKey.value = key
        if(key == 2 && tabKey2Init.value == false) {
            tabKey2Init.value = true
        }
    }
    
    if(route.query.target == 'my' ) {
        setTabKey(2)
    }

</script>